<template>
    <div>
        <div class="clearfix">
            <Form class="f-fl" inline :label-width="5">
                <FormItem>
                    <Input
                        v-model="params.stu"
                        placeholder="学生姓名/学生学号"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Select
                        v-model="params.classId"
                        placeholder="班级"
                        style="width:180px"
                        clearable
                    >
                        <Option v-for="item in classList" :key="item.classId" :value="item.classId" :label="item.className" />
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>
            <div class="f-fr">
                <Button style="margin-left: 10px;" @click="handleScoreExport">导出</Button>
                <Button style="margin-left: 10px;" @click="handleReport">下载实训报告</Button>
                <Button style="margin-left: 10px;" @click="toggleModel">分布图</Button>
            </div>
        </div>
        <Table :data="list" :columns="tbColumns">
            <template slot-scope="{ row }" slot="action">
                <div class="table-action">
                    <Button type="text" @click="openReportModal(row)">实训报告</Button>
                    <Button type="text">查看详情</Button>
                </div>
            </template>
        </Table>
        <Pagination
            :pageSize.sync="params.pageSize"
            :current.sync="params.pageNum"
            :total="params.total"
            @change="queryList"
        />
        <ReportModal v-model="report.visible" :report="report" />
    </div>
</template>
<script>
import ScoreInfo from './score-info'
import ReportModal from './report-modal'
import { queryTrainingScoreList, downloadTrainingStuReport } from '@/api/trainingManage'
import { declareTypes } from '@/libs/enums'

export default {
    props: {
        id: {
            type: String,
            default: ''
        },
        training: {
            type: Object,
            default: () => ({
                classList: []
            })
        }
    },
    components: {
        // eslint-disable-next-line vue/no-unused-components
        ScoreInfo,
        ReportModal
    },
    data () {
        return {
            params: {
                total: 0,
                pageNum: 1,
                pageSize: 10,
                stu: '',
                classId: '',
                status: ''
            },
            list: [],
            columns: Object.freeze([
                {
                    type: 'expand',
                    width: 30,
                    render: (h, params) => {
                        return h(ScoreInfo, {
                            props: {
                                value: params.row
                            }
                        })
                    }
                },
                { title: '序号', type: 'index', align: 'center', width: 80 },
                { title: '学生姓名', key: 'stuName', align: 'center' },
                { title: '学生学号', key: 'stuNo', align: 'center' },
                { title: '实训报告', key: 'reportScore', align: 'center' },
                { title: '实训成绩', key: 'practicalScore', align: 'center', sortable: 'custom' },
                { title: '操作', slot: 'action', align: 'center', width: 140 }
            ]),
            report: {
                visible: false,
                reportUrl: '',
                stuName: '',
                stuNo: '',
                reportScore: '',
                totalScore: ''
            }
        }
    },
    computed: {
        classList () {
            const classList = this.training.classList || []
            return classList
        },
        tbColumns () {
            let weight = this.training.weight
            weight = Array.isArray(weight) ? weight : []
            return this.setColumns(weight)
        }
    },
    created () {
        this.queryList()
    },
    methods: {
        queryList () {
            queryTrainingScoreList({
                ...this.params,
                practicalId: this.id
            }).then(res => {
                if (res.data.code === '0000') {
                    const data = res.data.data
                    data.list.forEach(item => {
                        item._disableExpand = item.formList.length < 1
                    })
                    this.list = data.list
                    this.params.total = data.total
                }
            })
        },
        handleScoreExport () {
            this.$Message.warning('还没开发')
        },
        handleReport () {
            const { status, classId } = this.params
            downloadTrainingStuReport({
                practicalId: this.id,
                classId,
                status
            })
        },
        toggleModel () {
            this.$emit('toggleMode', 'ScoreDistribution')
        },
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        clearSearch () {
            const params = this.params
            params.stu = ''
            params.classId = ''
            params.status = ''
            this.search()
        },
        setColumns (data) {
            const arr = []
            const typeKeys = {
                '1': 'jkDeclare',
                '2': 'ckDeclare',
                '3': 'jjDeclare',
                '4': 'cjDeclare',
                '5': 'jkInvt',
                '6': 'ckInvt',
                '7': 'roadManifest',
                '8': 'seaManifest'
            }
            data.forEach(item => {
                const type = item.type
                const key = typeKeys[type]
                const title = declareTypes[type]
                if (key && title) {
                    arr.push({
                        key,
                        title,
                        align: 'center'
                    })
                }
            })
            return this.columns.slice(0, 4)
                .concat(arr, this.columns.slice(this.columns.length - 3))
        },
        openReportModal (data) {
            const { reportUrl,
                stuName,
                stuNo,
                reportScore
            } = data
            console.log(data)
            this.report.reportUrl = reportUrl
            this.report.stuName = stuName
            this.report.stuNo = stuNo
            this.report.reportScore = reportScore
            this.report.totalScore = this.training.totalScore
            this.report.visible = true
        }
    }
}
</script>
